<template>
  <div class="bg">
    <div class="tit">
      <div class="icon">
        <img src="../../assets/img/logo_icon.png" alt="" />
      </div>
      <div class="text">数字化农业管理平台</div>
    </div>
    <div class="loginPic">
      <img src="../../assets/img/背景.png" alt="" />
    </div>
    <div class="box">
      <div class="login">
        <el-form
          :label-position="labelPosition"
          :model="form"
          :rules="rules"
          ref="loginform"
        >
          <el-form-item prop="userName">
            <el-input
              v-model="form.userName"
              prefix-icon="el-icon-mobile-phone"
              placeholder="请输入账号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              :show-password="true"
              type="password"
              placeholder="请输入密码"
              prefix-icon="el-icon-lock"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      labelPosition: 'top',
      form: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [
          { required: true, message: '账号必填', trigger: 'blur' },
          { min: 3, max: 10, message: '账号格式不正确', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码 必填', trigger: 'blur' },
          { min: 3, max: 30, message: '密码 格式不正确', trigger: 'blur' }
        ]
      },
      url: ''
    }
  },
  created () {},
  methods: {
    async login () {
      try {
        await this.$refs.loginform.validate()
        this.loading = true
        this.$store.dispatch('user/loginAction', this.form).then(() => {
          this.$router.push('/shuzhongtian')
        })
        // 采用模块化 没有开启命名空间  getters / mutation/action /... ===> this.$store.dispatch('mutation名称')
        // 采用模块化 开启命名空间     this.$store.dispatch('模块名称/mutation名称')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
  border: 0;
}
.bg {
  background: #eef1f4;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
  .loginPic {
    width: 47.9167vw;
    height: 100%;
    background: #ffffff;
    border-radius: 0px 0px 0px 0px;
    img {
      width: 47.9167vw;
      height: 100%;
    }
  }
  .tit {
    position: absolute;
    top: 4.1667vw*0.843;
    left: 2.6042vw;
    display: flex;
    align-items: center;
    .icon {
      margin-right: 0.5208vw;
      width: .5625rem;
      height: .6rem;
      img {
      width: .5625rem;
      height: .6rem;
      }
    }
    .text {
      font-size: 30px;
      font-weight: 600;
    }
  }
}
.box {
  width: 34.375vw;
  height: 36.4583vw * 0.834;
  background-color: #fff;
  position: relative;
  padding: 76px 4.1667vw 0;
  box-sizing: border-box;
  border-radius: 10px;
  margin: 0 8.8542vw;
}

.prc {
  position: absolute;
  top: -48px;
  left: 50%;
  margin-left: -48px;
  z-index: 99;
  img {
    width: 96px;
    height: 96px;
  }
}

.login {
  ::v-deep .el-input__inner {
    width: 26.0417vw;
    height: 3.125vw * 0.834;
  }
}
::v-deep .el-image {
  display: inline;
  width: 30%;
  height: 50px;
  position: absolute;
  right: 0;
}
.el-button {
  width: 26.0417vw;
  height: 3.125vw * 0.834;
  border-radius: 8px;
  background: linear-gradient(262deg, #5ee297, #80efb1);
}
</style>
